<template>
  <div class="app-container">
    <el-form :inline="true" ref="refForm" :model="form">
      <el-form-item label="查询时间" prop="time">
        <el-date-picker
          v-model="form.time"
          type="datetimerange"
          align="right"
          unlink-panels
          range-separator="至"
          start-placeholder="开始日期"
          :default-time="['00:00:00', '23:59:59']"
          end-placeholder="结束日期"
          value-format="yyyy-MM-dd HH:mm:ss"
          :picker-options="pickerWeekStep">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="游戏平台筛选：" prop="gameId">
        <el-select v-model="form.gamePlatformId">
          <el-option label="全部" :value="undefined"></el-option>
          <el-option v-for="item in consts.PLATFORM_TYPE"
                     :key="item.gamePlatformId"
                     :label="item.title"
                     :value="item.gamePlatformId">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="操作端" prop="clientType">
        <el-select v-model="form.clientType" placeholder="请选择操作端">
          <el-option label="全部" :value="undefined"></el-option>
          <el-option
            v-if="item.value!=-1"
            v-for="item in consts.PAYMENT_PLATFORM"
            :label="item.title"
            :key="item.value"
            :value="item.value"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item v-if="roleCheck('virtual')" class="with-pre-select" label="数据类型">
        <el-select v-model="form.isFake">
          <el-option v-for="item in consts.STATISTICS_RANGE"
                     :key="item.value"
                     :label="item.title"
                     :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>
      <el-button class="filter-item" type="primary" icon="el-icon-search" @click="submitFilterForm">搜索</el-button>
      <el-button v-if="roleCheck('export')" class="filter-item" type="primary" icon="el-icon-download"
                 @click="exportExcel">导出
      </el-button>
    </el-form>

    <el-table border :data="tableData" v-loading="loading" element-loading-text="加载中..."
              class="el-table-align-center" :default-sort="{prop: 'time', order: 'descending'}">
      <el-table-column label="时间" prop="time" sortable width="120" fixed="left" align="center">
      </el-table-column>
      <el-table-column width="120" :label="item" align="center" v-for="(item,index) in timeList" :key="index">
        <template slot-scope="{row}">
          <!-- <router-link :to="{name:'game-bet-list',query:form}"> -->
          <span class="clickText" @click="gotoGameBet(row)">
              {{row.dataList[index].value | currency}}
            </span>
          <!-- </router-link> -->
        </template>
      </el-table-column>
    </el-table>

  </div>
</template>


<script>
import { getStatisticalHoursBet } from '@/services/api/statistical';
import { form, pickerOption, grid } from '@/build';

export default {
  name: 'statistics-hours-recharge',
  mixins: [form, pickerOption, grid],
  data() {
    // let times = _.toPeriod({
    //   start: [-1, 'days'],
    //   end: [0, 'days'],
    //   format: 'YYYY-MM-DD'
    // });
    // 本月时间本月1号至当前时间
    const monthTime = [moment().startOf('month').format('YYYY-MM-DD 00:00:00'), moment().format('YYYY-MM-DD 23:59:59')];
    return {
      tableData: [],
      form: {
        time: monthTime,
        gamePlatformId: undefined,
        clientType: undefined,
        isFake: 0,
      },
      timeList: ['00:00', '01:00', '02:00', '03:00', '04:00', '05:00', '06:00', '07:00', '08:00', '09:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00', '16:00', '17:00', '18:00', '19:00', '20:00', '21:00', '22:00', '23:00'],
      filters: {
        stime: moment(monthTime[0]).valueOf(),
        etime: moment(monthTime[1]).valueOf() + 999,
        dataType: 2,
        gamePlatformId: undefined,
        clientType: undefined,
        isFake: 0,
      },
    };
  },
  computed:{
    tagNo() {
      return Number(this.$store.state.tagsView.lastTagNo) + 1;
    },
  },
  methods: {
    gotoGameBet(row) {
      const {
        gamePlatformId, clientType, isFake,
      } = this.form;
      const query = {
        gamePlatformId,isFake,clientType,add: true, tagNo: this.tagNo, time: [`${row.time.replace(/\//g, '-')} 00:00:00`, `${row.time.replace(/\//g, '-')} 23:59:59`],
      };
      if ([8000,19000,12000].includes(gamePlatformId)) {
        Object.assign(query, {
          tab: 'two',
          newView: true,
        });
      }
      this.$router.push({ path: '/game/game-bet-list', query });
    },
    submitFilterForm() {
      const {
        time, gamePlatformId, clientType, isFake,
      } = this.form;
      let stime;
      let etime;
      if (!_.isUndefined(time) && _.isArray(time)) {
        stime = moment(time[0]).valueOf();
        etime = moment(time[1]).valueOf() + 999;
      }
      this.filters = {
        ...this.filters, stime, etime, gamePlatformId, clientType, isFake,
      };
      this.getAll();
    },
  },
  mounted() {
    this.bindGet(getStatisticalHoursBet, 'tableData', {
      action: 'getGrid',
      sendingData: 'filters',
      format: (data) => {
        let newArray = [];
        let dataList = [];
        _.forIn(data, (val, key) => {
          newArray.push({ time: key, dataList: val });
        });
        newArray = _.sortBy(newArray, item => -item.time);

        newArray.map((item, index) => {
          _.forIn(item.dataList, (val, key) => {
            dataList.push({ hour: key, value: val });
          });
          dataList = _.sortBy(dataList, item => item.hour);
          item.dataList = dataList;
          dataList = [];
        });
        return newArray;
      },
    });
    this.getAll();
  },

};
</script>

<style scoped>
  .clickText {
    color: #409EFF;
    text-decoration: underline;
  }
</style>
